<template>
    <div class="chart_box">
        <a-spin class="spin" :spinning="loading"></a-spin>
        <div v-if="isDouble" class="">
            <a-tabs
                type="card"
                default-active-key="1"
                :tabBarGutter="-1"
                @change="switchShowCharts">
                <a-tab-pane key="1" tab="液位显示">
                    <!-- <property-box :property="list" :pro-code="code" /> -->
                </a-tab-pane>
                <a-tab-pane key="2" tab="容量显示">
                    <!-- <function-box :property="list" :pro-code="code" /> -->
                </a-tab-pane>
            </a-tabs>
        </div>
        <div :class="['chart',isDouble && 'double']" ref="stackLine"></div>
    </div>
</template>

<script>
import resize from '@/mixins/resize';
import echarts from 'echarts';
import {remoteDayLevel,remoteWeekLevel,remoteMonthLevel,remoteYearLevel} from '@/api/monitor'

export default {
    name: 'stackLine',
    mixins: [resize],
    props: {
        info: {
            type: Object,
            default: () => {}
        },
        type:{// year month week day
            type: String,
            default:'day'
        },
        isDouble: {
            //是否显示双线
            type: Boolean,
            default: false
        },
        isFlag: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            loading:false,
            isLiquid:true,
            option:{},
            leftAxisData:[],
            yAxisData:[]
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initEchart();
        });
    },
    methods: {
        switchShowCharts(e){
            if(e==1){
                this.isLiquid= true;
            }else{
                this.isLiquid = false;
            }
            this.myChart.setOption(
                {
                    ...this.option,
                    legend:{
                        show:false,
                        orient: 'horizontal',
                        x:'center',
                        y:'right',
                        selected:{
                            '液位': this.isLiquid,
                            '容量': !this.isLiquid
                        }
                    },
                },
                true
            );
        },
        async initEchart() {
            let that = this;
            let unit = '',
                type = '';
            let isFlag = this.isFlag;
            let isDouble = this.isDouble;
            let xData = [];
            let yData = [];
            let literData = [];
            if(this.type=='day'){
                let res = await this.getDayLevel();
                let {xLevelData,yLevelData,yLiterData} = this.dealLevelData(res)
                xData = xLevelData;
                yData = yLevelData;
                literData = yLiterData;
            }
            if(this.type=='week'){
                let res = await this.getWeekLevel();
                let {xLevelData,yLevelData,yLiterData} = this.dealLevelData(res)
                xData = xLevelData;
                yData = yLevelData;
                literData = yLiterData;
            }
            if(this.type=="month"){
                let res = await this.getMonthLevel();
                let {xLevelData,yLevelData,yLiterData} = this.dealLevelData(res,'calDate','lastLevel','usedAmountVol')
                xData = xLevelData;
                yData = yLevelData;
                literData = yLiterData;
            }
            if(this.type=="year"){
                let res = await this.getYearLevel();
                let {xLevelData,yLevelData,yLiterData} = this.dealLevelData(res,'calDate','lastLevel','usedAmountVol')
                xData = xLevelData;
                yData = yLevelData;
                literData = yLiterData;
            }

            this.myChart = echarts.init(this.$refs.stackLine);

            let tooltip = {
                trigger: 'axis',
                position: [30, 20],
                formatter: function (params) {
                    let param = params[0];
                    let { name, data } = param;
                    let string = '';
                    if (isDouble) {
                        if(that.isLiquid){
                            string = '液位：' + data + `CM <br/>`+name;
                        }else{

                            string = `容量：` + data + ' L<br/>'+name;
                        }
                        // string = '液位：' + data + `CM <br/>容量：` + other.value + ' L<br/>'+name;
                    } else {
                        let label = '液位'
                        if(that.type=='month' || that.type=='year'){
                            label="用量"
                        }
                        string = `${label}：` + data + `CM <br/>`+name;
                    }
                    return string;
                }
            };
            let yAxisData = [];
            let ySeries = [];
            let leftAxisData = [
                {
                    type: 'value',
                    show: isFlag,
                    name: '',
                    minInterval: type == 'bool' ? 1 : 0.001,
                    nameTextStyle: {
                        color: '#888'
                    },
                    axisTick: {
                        show: isFlag
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#cecece'
                        }
                    },
                    axisLabel: {
                        show: isFlag,
                        color: '#666'
                    },
                    splitLine: {
                        show: false
                    },
                    axisPointer: {
                        snap: isFlag
                    }
                }
            ]
            if (isDouble) {
                //y轴设置
                yAxisData = [
                    {
                        type: 'value',
                        position: 'left',
                        name: '',
                        nameTextStyle: {
                            color: '#888'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#556677'
                            },
                            formatter: '{value}'
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ];
                ySeries = [
                    {
                        type: 'line',
                        data: literData,
                        name:"容量",
                        yAxisIndex: 1,
                        smooth: true,
                        symbol: 'circle',
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: 'rgba(51,63,255,0.8)' // 线条颜色
                            }
                        },
                        itemStyle: {
                            color: 'rgba(51,63,255,1)',
                            borderColor: '#fff'
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(51,63,255,1)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(51,63,255,0.1)'
                                        }
                                    ],
                                    false
                                )
                            }
                        }
                    }
                ];
            }

            this.option = {
                tooltip: tooltip,
                grid: {
                    left: isFlag ? 60 : -30,
                    right: isFlag ? 60 : -30,
                    bottom: isFlag ? 20 : 0,
                    top: isFlag ? 30 : 10,
                    container: true
                },
                legend:{
                    show:false,
                    orient: 'horizontal',
                    x:'center',
                    y:'right',
                    selected:{
                        '液位': this.isLiquid,
                        '容量': !this.isLiquid
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        show: isFlag,
                        data: xData,
                        axisLine: {
                            lineStyle: {
                                color: '#cecece'
                            }
                        },
                        axisLabel: {
                            color: '#666'
                        },
                        axisTick: {
                            show: isFlag
                        },
                        axisPointer: {
                            snap: true
                        }
                    }
                ],
                yAxis: [
                    ...leftAxisData,
                    ...yAxisData
                ],
                series: [
                    {
                        type: 'line',
                        data: yData,
                        name:"液位",
                        yAxisIndex: 0,
                        smooth: true,
                        symbol: 'circle',
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: 'rgba(88,207,255,.8)' // 线条颜色
                            }
                        },
                        itemStyle: {
                            color: 'rgba(88,207,255,1)',
                            borderColor: '#fff'
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(88,207,255,1)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(88,207,255,0.1)'
                                        }
                                    ],
                                    false
                                )
                            }
                        }
                    },
                    ...ySeries
                ]
            }
            
            this.myChart.setOption(
                this.option,
                true
            );
        },
        dealLevelData(data,x='createTime',y='level',liter="levelVol"){
            let xLevelData = [];
            let yLevelData = [];
            let yLiterData = [];
            if(data && data.length){
                data.map(item=>{
                    xLevelData.push(item[x])
                    yLevelData.push(item[y])
                    yLiterData.push(item[liter])
                })
            }
            return{xLevelData,yLevelData,yLiterData}
        },
        //日液位变化
        async getDayLevel(){
            let result = [];
            try{
                this.loading = true;
                let {jarCode,deviceCode} = this.info;
                let res = await remoteDayLevel({jarCode,deviceCode});
                let {data} = res;
                result = data;
            }finally{
                this.loading = false;
                return result;
            }
        },
        //周液位变化
        async getWeekLevel(){
            let result = [];
            try{
                this.loading = true;
                let {jarCode,deviceCode} = this.info;
                let res = await remoteWeekLevel({jarCode,deviceCode});
                let {data} = res;
                result = data;
            }finally{
                this.loading = false;
                return result;
            }
        },
        //月液位变化
        async getMonthLevel(){
            let result = [];
            try{
                this.loading = true;
                let {jarCode,deviceCode} = this.info;
                let res = await remoteMonthLevel({jarCode,deviceCode});
                let {data} = res;
                result = data;
            }finally{
                this.loading = false;
                return result;
            }
        },
        //年液位变化
        async getYearLevel(){
            let result = [];
            try{
                this.loading = true;
                let {jarCode,deviceCode} = this.info;
                let res = await remoteYearLevel({jarCode,deviceCode});
                let {data} = res;
                result = data;
            }finally{
                this.loading = false;
                return result;
            }
        },

    }
};
</script>

<style lang="scss" scoped>
.chart_box{
    position: relative;
    .chart{
        width: 100%;
        height: 100%;
        &.double{
            height: calc(100% - 60px);
        }
    }
    .spin{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
}
</style>
